<template>
  <main class="_container" style="font-size: 12px">
    <div class="nofity">
      <a-alert @click="goToOrder" v-show="message != null" :message="message" type="success" />
    </div>
    <a-button href="/#/user/index" size="small">充值</a-button>
    <div>接单开关 <a-switch size="small" v-model:checked="open" @click="changeAcceptFunc" /></div>
    <div>声音开关 <a-switch size="small" v-model:checked="audio" @click="changePromptFunc" /></div>
    <div
      >接单冻结：<span class="red">{{ balance?.freezeTrade }}</span></div
    >
    <div
      >账户余额：<span class="red">{{ balance?.balance }}</span></div
    >
    <div
      >冻结押金：<span class="red">{{ balance?.freezeMoney }}</span></div
    >
  </main>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { GetNewOrderApi, OpenAcceptOrderApi, OpenPromptApi } from '@/api/user';
  import { router } from '@/router';
  import { Modal, message as MessagePlugin } from 'ant-design-vue';

  const { getUserInfo, setStatus, getUserInfoAction, refreshBalance, getSiteConfig } =
    useUserStore();
  const open = ref(false);
  const audio = ref(false);
  const orderList = ref([]);
  const message = ref('');
  let timer: null | NodeJS.Timeout = null;
  const balance = ref({
    freezeTrade: 0,
    balance: 0,
    freezeMoney: 0,
  });

  const audioContent = new Audio(getSiteConfig.accept_order_sound);
  audioContent.loop = false;

  onMounted(() => {
    refreshFunc();
    timer = setInterval(() => {
      refreshFunc();
    }, 5000);
    GetInfo();
    // setInterval(() => {
    //   GetInfo();
    // }, 60 * 1000);
    open.value = getUserInfo.takeOrders == '1' ? true : false;
    audio.value = getUserInfo.prompt == '1' ? true : false;
  });

  const GetInfo = async () => {
    await getUserInfoAction();
  };

  const refreshFunc = async () => {
    refreshBalance().then((res) => {
      balance.value = res;
    });
    const order = await GetNewOrderApi();
    if (order) {
      orderList.value.push(order);
      // 处理提示音
      consloge.log(order);
      if (localStorage.getItem('orderNew') == order[0]) return;
      message.value = '有新的订单，请及时处理';
      if (getUserInfo.prompt == '1') {
        audioContent
          .play()
          .then(() => {
            localStorage.setItem('orderNew', order[0]);
          })
          .catch(() => {
            Modal.info({
              title: '提示',
              content: '您的浏览器不支持自动播放，请手动播放',
              okText: '确定',
              cancelText: '取消',
            });
          });
      }
      return;
    }

    message.value = null;
  };

  const changeAcceptFunc = (checked) => {
    OpenAcceptOrderApi({ status: checked ? 1 : 0 })
      .then(() => {
        setStatus(checked ? '1' : '0', audio.value ? '1' : '0');
        MessagePlugin.success(checked ? '接单开启' : '接单关闭');
      })
      .catch(() => {
        open.value = !checked;
      });
  };

  const changePromptFunc = async (checked) => {
    OpenPromptApi({ prompt: checked ? 1 : 0 })
      .then(() => {
        setStatus(open.value ? '1' : '0', checked ? '1' : '0');
        MessagePlugin.success(checked ? '提示音开启' : '提示音关闭');
      })
      .catch(() => {
        MessagePlugin.error('提示音操作失败');
      });
  };

  const goToOrder = () => {
    router.push({ name: 'CollectionCheck' });
  };

  onUnmounted(() => {
    clearTimeout(timer);
  });
</script>

<style lang="less" scoped>
  ._container {
    display: flex;
    align-items: center;
    justify-content: start;
    color: #000;
    gap: 16px;

    .red {
      color: #f50;
    }

    .nofity {
      min-width: 400px;
    }
  }
</style>
